<template>
  <div class="hello">
    <h1>{{ $t('index.headerUS') }}</h1>
    <p>{{ $t('message.welcome') }}</p>

    <el-select v-model="selectedLanguage" @change="handleLanguageChange">
      <el-option label="中文" value="zh"></el-option>
      <el-option label="English" value="en"></el-option>
    </el-select>
    <zc-table
        :table-column="tableColumn" :table-data="tableData"
    >
      <template v-slot:custom-slot="{ opts }">
      <div v-if="opts">{{ JSON.stringify(opts) }} about</div>
    </template></zc-table>
  </div>
</template>

<script>
import ZcTable from "@/components/common-table/ZcTable.vue";

export default {
  name: 'HelloWorld',
  components: {ZcTable},
  data() {
    return {
      selectedLanguage: this.$i18n.locale,
      tableColumn: [
        {
          name: '列1',
          value: 'name1',
          hide: false,
          color: 'red',
          titleColor: '#939393',
          colAlign: 'left',
        },
        {
          name: '列2',
          value: 'name2',
          hide: false,
          color: 'red',
          titleColor: '#939393',
        },
      ],
      tableData: [], // 测试表格数据
    }
  },
  methods: {
    handleLanguageChange(lang) {
      this.$i18n.locale = lang
      localStorage.setItem('local', lang)
    }
  },
  mounted() {
    console.log(this.$_.uniqueId('tableRowItem'))
    console.log(this.$API.MOCK_TEST)
    this.$http.post(this.$API.MOCK_TEST).then((res) => {
      console.log(res.data)
      this.tableData = res.data.rows
    })
  }
}
</script>